<script setup lang="ts">
import LearnedIcon from '../../assets/learn_icon.png';
import LearnIcon from '../../assets/learned.png';

function getIcon(learned:Boolean){
  if(learned){
    return LearnIcon;
  }else{
    return LearnedIcon;
  }
}

const getBtnStr = (learned:string) => {
  return learned ? '已学习' : '去学习'
}

const props = defineProps(['data'])


</script>

<template>
  <div style="display: flex;flex-wrap: wrap;gap: 20px">
  <div v-for="(elment,index) in props.data" class="mainStyle" :key="index" :class="{'unMainStyle':elment.learned}">
    <div style="display: flex;flex-direction: row">
      <img style="width: 35px;padding-top: 10px" height="35px" :src="getIcon(elment.learned)">
      <el-text line-clamp="2" style="width: 200px;margin: 10px;font-size: 18px;color: #191919">
       {{elment.content}}
      </el-text>
    </div>
    <div style="display: flex;justify-content: flex-end;margin-top: 20px">
    <div class="btnStyle" :class="{'unBtnStyle':elment.learned}">
     {{ getBtnStr(elment.learned) }}
    </div>
    </div>
  </div>
  </div>
</template>

<style scoped>
.mainStyle{
  display: flex;
  flex-direction: column;
  background: url('../../assets/line_small_frame.png'),
  linear-gradient( 180deg, #EAF3FF 100%, #EAF3FF 100%);
  cursor: pointer;/*鼠标移动上去是手型*/
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  width: 242px;
  height: 143px;
  border-radius: 6px;
  padding: 8px 20px;
}

.unMainStyle{
  background: url('../../assets/line_small_frame.png'),
  linear-gradient( 180deg, #F2F2F2 100%, #E0E0E0 100%);
  background-size: cover; /* 让背景图片覆盖整个容器 */
  background-position: center; /* 居中背景图片 */
  background-repeat: no-repeat; /* 不重复背景图片 */
}

.btnStyle{
  padding: 6px 10px;
  width: 65px;
  height: 32px;
  background: #3C8DF9;
  border-radius: 6px 6px 6px 6px;
  align-items: center;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  text-align: center;
}

.unBtnStyle{
  background: linear-gradient(to right,#AEAEAE,#737373);
}

</style>